import React, { Component } from 'react';
import PropTypes from 'prop-types';
import headerStyle from '@/component/common/header.scss';
import HouseModeSkinStore from '@/store/HouseModeSkin';

class SkinPop extends Component {
    static propTypes = {
        menuRef: PropTypes.func.isRequired,
        style: PropTypes.object
    };
    changeSkin = e => {
        const skinName = 'skin-' + e.target.name;
        HouseModeSkinStore.setSkin(skinName);
    };
    render() {
        const { menuRef, style } = this.props;
        const { changeSkin } = this;
        return (
            <div ref={menuRef} className={headerStyle['toolbar-skin-pop']} style={style}>
                <a onClick={changeSkin} className={headerStyle['toolbar-skin-pop-item']}><img name="lan" src="/static/alliance2/image/house/skin/lan.png"/></a>
                <a onClick={changeSkin} className={headerStyle['toolbar-skin-pop-item']}><img name="fen" src="/static/alliance2/image/house/skin/fen.png"/></a>
                <a onClick={changeSkin} className={headerStyle['toolbar-skin-pop-item']}><img name="lv" src="/static/alliance2/image/house/skin/lv.png"/></a>
                <a onClick={changeSkin} className={headerStyle['toolbar-skin-pop-item']}><img name="jin" src="/static/alliance2/image/house/skin/jin.png"/></a>
            </div>
        );
    }
}

class HeaderNavSkin extends Component {
    state = {
        dropDown: false
    };
    componentDidMount() {
        document.addEventListener('click', this.listenerClick);
    }
    listenerClick = (e) => {
        if (!this.state.dropDown) return;
        this.hideDropMenu();
    };
    componentWillUnmount() {
        document.removeEventListener('click', this.listenerClick);
    }
    showDropMenu = e => {
        e.nativeEvent.stopImmediatePropagation();
        this.setState({ dropDown: true });
    };
    hideDropMenu = () => { this.setState({ dropDown: false }) };
    render() {
        const { dropDown } = this.state;
        let showDropMenu, hoverMenuStyle;
        if (dropDown) {
            showDropMenu = { visibility: 'visible', opacity: 1 };
            hoverMenuStyle = { backgroundColor: '#2b2b2b' };
        }
        return (
            <div className={headerStyle['toolbar-item']}>
                <div className={headerStyle['toolbar-item-btn']} style={hoverMenuStyle} onClick={this.showDropMenu}>
                    <span><img className={headerStyle['toolbar-item-icon']} src="/static/alliance2/image/house/huanfu.png"/>换肤</span>
                </div>
                <SkinPop menuRef={ menu => this.menu = menu } style={showDropMenu}/>
            </div>
        );
    }
}

export default HeaderNavSkin;